<template>
  <div class="test h-full flex flex-col flex-items-center" >
		<!-- region icon  -->
    <h1>
			<!-- unplugin-icons:svg组件, 采用@iconify-json里的图标
					 会根据你使用到的自动 autoInstal, 比如↓用到的就会自动安装 @iconify-json/mdi,
					 但和Unocss presetIcons的方式一样, 也没法动态导入 （都是要提前完整的“声明”在模板中的, 在js脚本里间接用到打包时是不会打包的）
					 todo 自定义svg图标
			-->
      <i-mdi-rocket />
      This is an about page
      <i-mdi-account />
    </h1>
	  <div>
			<!-- vite-plugin-svg-icons:svg组件, 只需要把你想使用的svg放在插件指定的加载目录下即可使用	-->
		  <SvgIcon type="advice" class="text-sky w-5 h-5"></SvgIcon>
		  <SvgIcon type="record" class="text-red w-5 h-5"></SvgIcon>
	  </div>

		<!-- NetIcon: 采用font-family -->
	  <iconfont-icon type="smoking"/>
	  <div>
			<!-- Unocss presetIcons: 采用 css mask + base64 svg 技术
					 缺点在于没法动态加载, 并且在开发模式下需要提前安装对应的图标 pnpm i -D @iconify/json
					 也可以只安装你要用的那部分,比如 @iconify-json/mdi
			-->
		  <div class="i-mdi-rocket"></div>
		  <div class="i-mdi-account"></div>
	  </div>

	  <!-- @iconify/vue Icon
	       生成的就是一个svg
				 优势在于可动态加载, 可实时从Iconify官方或者第三方provider, 从网络加载图标
    -->
		<iconify :icon="iconX"/>


		<!-- endregion	-->

    <p>x: {{ x }}</p>
    <p>y: {{ y }}</p>

	  ↓ 下面的猫先生是mock返回的 (from test.ts - /api/image)
    <img src="/api/image" alt="">

	  <button @click="testMockRequest">点击测试mock请求 - test.ts - /api/post</button>
	  <button @click="testMockRequest2">点击测试mock请求 - test.ts - /api/get</button>

	  <el-row class="mb-4">
		  <el-button>Default</el-button>
		  <el-button type="primary">Primary</el-button>
		  <el-button type="success">Success</el-button>
		  <el-button type="info">Info</el-button>
		  <el-button type="warning">Warning</el-button>
		  <el-button type="danger">Danger</el-button>
	  </el-row>

	  <dark-mode-toggle :dark="true"/>
	  <div class="w-25 h-25 bg-red dark:bg-amber">会跟着darkMode一起变</div>
  </div>
</template>

<style lang="scss">
//$color:--color-text;
$color:red;

@media (min-width: 1024px) {
  .test {
    color: $color;
    //min-height: 100vh;
    //display: flex;
    //flex-direction: column;
    //align-items: center;
  }
}
</style>
<script setup lang="ts">
const target = ref(null);
const {x, y, isOutside} = useMouseInElement(target);

const testMockRequest = async () => {
	console.log('testMockRequest');
	//https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
	const res = await fetch('/api/post',{
		method: 'post'
	})
	console.log('testMockRequest res:',res);
	const p1 = res.json()
	console.log('testMockRequest res.json():',p1);
	const json = await p1;
	console.log('json:',json);
};
const testMockRequest2 = async () => {
	console.log('testMockRequest');
	//https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
	const res = await fetch('/api/get')
	console.log('testMockRequest res:',res);
	const p1 = res.json()
	console.log('testMockRequest res.json():',p1);
	const json = await p1;
	console.log('json:',json);
};

const iconX = ref('ep:chat-round');
setInterval(()=>{
	iconX.value = 'ep:chat-dot-square'
},3000)
</script>